<template>
  <div class="home">
    <el-row :gutter="10">
      <el-col :span="16">
        <div class="left">
          <slides-show class="m-b-20"/>
          <div v-if="articleList.length == 0" class="text-align-center">
            <el-divider></el-divider>
            <i class="el-icon-warning-outline fz-50"></i>
            <h4>暂无首页推荐文章!</h4>
            <h3>请到管理端添加</h3>
            <el-divider></el-divider>
          </div>  
          <article-card v-else v-for="(item, index) in articleList" :key="index" :info="item" />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="right">
          <!-- 信息 ↓ -->
          <info-card />
          <!-- 特别推荐 ↓ -->
          <special-recommend class="m-b-50" />
          <!-- 最新留言 ↓ -->
          <new-guests class="m-b-50" />
          <!-- 最新更新 ↓ -->
          <last-update-article />
        </div>
      </el-col>
    </el-row>  
  </div>
</template>

<script>
import ArticleCard from '../components/ArticleCard'
import SpecialRecommend from '../components/SpecialRecommend'
import LastUpdateArticle from '../components/LastUpdateArticle'
import InfoCard from '../components/InfoCard'
import NewGuests from '../components/NewGuests'
import SlidesShow from '../components/SlidesShow'
export default {
  name: 'home',
  components: {
    ArticleCard,
    SpecialRecommend,
    SlidesShow,
    LastUpdateArticle,
    NewGuests,
    InfoCard
  },
  created() {
    this.getArticles()
  },
  data() {
    return {
      articleList: []
    }
  },
  methods: {
    async getArticles() {
      let res = await this.api.post('/client/getArticles', {
        isHome: true
      })
      if(res.code == 0) this.articleList = res.data
      else this.$message({type: 'warning', message: res.message })
    }
  },

}
</script>

<style lang="scss">
.home {
  width: 1100px;
  margin: 0 auto;
  padding-top: 80px;
  .left {
    padding:  10px 10px 10px 0px;
    border-radius: 3px;
    // box-shadow: 0 1px 5px rgba(0,0,0,.2);
  }
  .right {
    padding:  10px 0px 10px 10px;
    // box-shadow: 0 1px 5px rgba(0,0,0,.2);
  }
}
</style>